<template>
	<div class="warper">
		<h3 class="title">Creative Briefs & Jobs</h3>
		<div class="brief-cont">
			<p class="text">GetCraft is a premium ceative network.It’s the best place to connect with</p>
			<p class="text">creative pro fessionals and businesses looking for projects or work.</p>
		</div>
		<!-- 按钮表单 -->
		<div class="btn-post">
			<button type="button" class="btn btn-danger btn-lg btn-prm" data-toggle="modal" data-target="#myModal">
				Post a Brief or Job
			</button>
			<!-- Modal -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h4 class="modal-title" id="myModalLabel">Post Public Brief/Job</h4>
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						</div>
						<div class="text">
							<p style="padding: 5px 0 0 15px;">Tell the creator what you want them to do & include references.</p>
						</div>
						<div class="modal-body">
							<form accept-charset="UTF-8">
								<div class="form-group">
									<label for="industy">行业</label>
									<select name="industy" class="form-control" id="industy">
										<option>B2B</option>
									</select>
								</div>
								<!--  -->
								<div class="from-item-brand d-flex justify-content-between">
									<div class="form-group">
										<label for="brand">品牌名称</label>
										<input type="text" class="form-control" id="brand" placeholder="Huawei">
									</div>
									<div class="form-group">
										<label for="product">产品</label>
										<input type="text" class="form-control" id="product" placeholder="mate30pro.xxx.com">
									</div>
								</div>
								<!-- 期望假期 -->
								<div class="d-flex justify-content-between from-item-hope">
									<div class="form-group">
										<label for="hope-data">期望交期</label>
										<select name="industy" class="form-control" id="hope-data">
											<option>付款后10天</option>
										</select>
									</div>
									<div class="form-group">
										<label for="tv-show">推广目标</label>
										<select name="industy" class="form-control" id="tv-show">
											<option>直播带货</option>
										</select>
									</div>
								</div>
								<!-- 期望交期 end -->
								<!-- 发布平台 -->
								<p>发布平台</p>
								<div class="platform d-flex">
									<div>
										<div class="form-group">
											<div class="form-check form-check-inline">
												<input class="form-check-input" type="checkbox" style="zoom: 180%;" id="inlineCheckbox1" value="option1">
												<label class="form-check-label" for="inlineCheckbox1">
													Tik Tok
												</label>
											</div>
										</div>
										<div class="form-group">
											<div class="form-check form-check-inline">
												<input class="form-check-input" type="checkbox" style="zoom: 180%;" id="inlineCheckbox1" value="option1">
												<label class="form-check-label" for="inlineCheckbox1">
													Facebook
												</label>
											</div>
										</div>
									</div>
									<!--  -->
									<div class="platform-right">
										<div class="form-group">
											<div class="form-check form-check-inline">
												<input class="form-check-input" type="checkbox" style="zoom: 180%;" id="inlineCheckbox1" value="option1">
												<label class="form-check-label" for="inlineCheckbox1">
													Google
												</label>
											</div>
										</div>
										<div class="form-group">
											<div class="form-check form-check-inline">
												<input class="form-check-input" type="checkbox" style="zoom: 180%;" id="inlineCheckbox1" value="option1">
												<label class="form-check-label" for="inlineCheckbox1">
													Pinteret
												</label>
											</div>
										</div>
									</div>
									<!--  -->
								</div>
								<!-- 发布平台 end -->
								<!-- 预算计价 -->
								<div class="d-flex justify-content-between from-item-hope">
									<div class="form-group">
										<label for="yusuan">预算计价</label>
										<input type="text" class="form-control" id="yusuan">
									</div>
									<div class="form-group">
										<label for="fujia">附加出价</label>
										<input type="text" class="form-control" id="fujia">
									</div>
								</div>
								<!-- 预算计价 end -->
								<!-- KOL领域 -->
								<div class="d-flex justify-content-between from-item-hope">
									<div class="form-group">
										<label for="scence">KOL领域</label>
										<select name="industy" class="form-control" id="scence">
											<option>科技测评</option>
										</select>
									</div>
									<div class="form-group">
										<label for="fans">推广目标</label>
										<select name="industy" class="form-control" id="fans">
											<option>5w以下</option>
										</select>
									</div>
								</div>
								<!-- KOl end -->
								<!-- KOL 地区-->
								<div class="d-flex justify-content-between from-item-hope">
									<div class="form-group">
										<label for="address">KOL地区</label>
										<select name="industy" class="form-control" id="address">
											<option>北美</option>
										</select>
									</div>
									<div class="form-group">
										<label for="promote-style">推广形式</label>
										<select name="industy" class="form-control" id="promote-style">
											<option>插播</option>
										</select>
									</div>
								</div>
								<!-- KOl end -->
								<!-- 是否需要版权-->
								<div class="d-flex justify-content-between from-item-hope">
									<div class="form-group">
										<label for="tv-copyright">是否需要视频版权</label>
										<select name="industy" class="form-control" id="tv-copyright">
											<option>否</option>
											<option>是</option>
										</select>
									</div>
									<div class="form-group">
										<label for="ch-hook">备注</label>
										<input type="text" class="form-control" id="ch-hook" placeholder="中国香港优先">
									</div>
								</div>
								<!-- KOl end -->
								<!--  -->
							</form>
						</div>
						<div class="modal-footer">
							<div class="add-avator">
								<img src="../../assets/images/redadd.png" alt="">
								<img src="../../assets/images/avator1.png" alt="">
								<img src="../../assets/images/avator2.png" alt="">
							</div>
							<button type="button" class="btn btn-danger">Save changes</button>
						</div>
					</div>
				</div>
			</div>
			<!-- model end -->
			<p style="margin-left: -24px;">Completely free during Covid-19</p>
		</div>
	</div>
</template>

<script>
	export default {}
</script>

<style lang="scss" scoped>
	.modal-footer{
		justify-content: space-between;
	}
	.warper {
		display: flex;
		// justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 410px;
		background: url(../../assets/images/brief.png) center no-repeat;
		background-size: cover;
		margin-top: 84px;
	}
	
	.modal-content input,.modal-content select{
		font-size: 14px;
	}
	.warper .title {
		font-weight: bold;
		padding-top: 90px;
	}

	// .btn-post,
	.brief-cont {
		text-align: center;
		line-height: 41.273px;
		padding-top: 26.67px;
		p{
			font-size: 24px;
			color: #666666;
		}
	}

	.btn-danger {
		background-color: #F15D46;
		outline: none;
		border: none;
		margin: 40px 0 20px 0;
		font-size: 17.55px;
	}

	.btn-danger::hover {
		color: none;
	}

	.from-item-hope .form-group {
		width: 45%;
	}
	
	.platform {
		padding-top: 10px;
		.platform-right{
			padding-left: 30px;
		}
		div{
			width: 100%;
		}
	}
	
	.add-avator{
		position: relative;
		margin-top: -20px;
		img{
			display: inline-block;
			position: absolute;
			top: 0;
		}
		img:nth-of-type(1){
			left: 0px;
			z-index: 3;
		}
		img:nth-of-type(2){
			left: 25px;
			z-index: 2;
		}
		img:nth-of-type(3){
			left: 50px;
		}
	}
	.from-item-brand .form-group{
		width: 45%;
	}
	.form-group{
		position: relative;
		#industy::after{
			position: absolute;
			height: 100%;
			width: 100%;
			top: 0;
			right: 0;
			background: url(../../assets/images/xiala.png) no-repeat center;
			background-size: cover;
		}
	}
	@media screen and (max-width:768px) {
		.warper .title {
			padding-top: 10px;
		}
		.btn-danger {
			margin: auto;
		}
		.brief-cont {
			line-height: 41.273px;
			padding-top: 26.67px;
			p{
				font-size: 24px;
				color: #666666;
			}
		}
	}
</style>
